<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>倒计时</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
  #data{
    text-align: center;
    font-size: 50px;
    margin: 20%;
  }
</style>
</head>
<body>
  <!-- 第一步：先写一个DIV存放倒计时 -->
  <div id="data"></div>
  <script type="text/javascript">
    var timer = null;
    var res = null;

    // 第二步：写倒计时函数
    function resCountDown(time){
      if(timer || !time)
        return;
      // 首先，设置定时器每隔一秒，计算一次剩余时间
      timer = setInterval(function(){
         //然后，根据秒计算剩余天数时分秒
        var result = getCountDown(time, [
          {unit: 86400000, append: '天 '},
          {unit: 3600000, append: ':'},
          {unit: 60000, append: ':'},
          {unit: 1000, append: ' '}
        ]);
        res = result.substr(0, 1) === '0'?result.substr(1):result;
        //最后写入DIV中
        var dataDom = document.getElementById('data');
        dataDom.innerText = res;
        time-= 1000;
      }, 1000)
    }

   
    function getCountDown(seconds, level){
      var result = '';
      var time = Math.floor(seconds / level[0].unit);
      result += time<10?'0'+time:time;
      result += level[0].append;
      var sec = seconds - (time * level[0].unit);
      level.splice(0, 1);
      if(level.length > 0){
        result += getCountDown(sec, level);
      }
      return result;
    }
    
    var target = new Date('2022/12/26 00:00:00').getTime();
    var now = new Date().getTime();

    //接下来我们设置一个倒计时看看效果
    resCountDown(target - now);
  </script>
</body>
</html>